import React, { useState, useEffect, FC } from 'react'
import { Radio, Col, } from 'antd'
import type { RadioChangeEvent } from 'antd'
import { AppstoreOutlinedIcon, MenuOutlinedIcon } from '@/models/icons'
import { IData } from '@/models/common'
import './kanban.scss'
export interface IKanban {
  onChange?: (value: 'list' | 'icon') => void
}
export interface IViewModel {
  value: 'list' | 'icon'
}

const KanBan: FC<IKanban> = (props) => {
  const { onChange } = props

  const [data, setData] = useState<IData<IViewModel>>({
    ViewModel: {
      value: "list"
    }
  })

  const events = {
    onRadioChange({ target: { value } }: RadioChangeEvent) {
      const { ViewModel } = data
      ViewModel.value = value
      setData({ ...data })
      onChange && onChange(value)
    }
  }

  const methods = {
    renderPage() {
      return (
        <Col className='kanban-wrap'>
          <Radio.Group
            size='large'
            options={[
              { label: <MenuOutlinedIcon style={{ fontSize: 18 }} />, value: "list" },
              { label: <AppstoreOutlinedIcon style={{ fontSize: 18 }} />, value: "icon" }
            ]}
            onChange={events.onRadioChange}
            value={data.ViewModel.value}
            optionType="button"
            buttonStyle="solid"
          />
        </Col>
      )
    }
  }

  return methods.renderPage()

}
export default KanBan